<template>
  <div class="tracetask-container">
    <v-layout wrap justify-center align-center>
      <v-flex md12 d-flex>
        <v-flex md2 px-2>
          <v-text-field v-model="queryForm.taskNumber" label="任务编号"></v-text-field>
        </v-flex>
        <v-flex md2 px-2>
          <v-text-field v-model="queryForm.shopName" label="店铺"></v-text-field>
        </v-flex>
        <v-flex md2 px-2>
          <v-btn round class="subTitle" color="primary" @click="onQuery">
            <span>查询</span>
            <v-icon>search</v-icon>
          </v-btn>
        </v-flex>
      </v-flex>

      <!-- table -->
      <v-flex md12 class="elevation-1">
        <v-data-table :headers="headers" :loading="loading" :items="tableData" hide-actions>
          <template v-slot:items="props">
            <td class="text-xs-center">{{ props.item.taskId }}</td>
            <td class="text-xs-center">{{ props.item.taskNumber }}</td>
            <td class="text-xs-center">{{ props.item.platform | Platform }}</td>
            <td class="text-xs-center">{{ props.item.taskType | TaskType}}</td>
            <td class="text-xs-center mini-button">
              <v-btn
                @click="onUserInfo(props.item)"
                round
                flat
                small
                class="subTitle"
                color="blue lighten-2"
              >
                <div class="mr-1">用户信息</div>
              </v-btn>
            </td>
            <td class="text-xs-center">{{ props.item.shopName }}</td>
            <td class="text-xs-center">{{ props.item.price }}</td>
            <td class="text-xs-center mini-button">
              <v-btn
                round
                small
                flat
                class="subTitle"
                color="green lighten-2"
                @click="onImage(props.item)"
              >
                <div class="mr-1">查看图片</div>
              </v-btn>
            </td>
            <td class="text-xs-center">{{ props.item.amount }}</td>
            <td class="text-xs-center">{{ getTime(props.item.createTime) }}</td>
            <td class="text-xs-center">{{ props.item.addedFee }}</td>
            <td class="text-xs-center mini-button">
              <v-btn
                round
                small
                outline
                class="subTitle"
                color="indigo lighten-2"
                @click="onDetail(props.item)"
              >
                <div class="mr-1">查看详情</div>
              </v-btn>
              <v-btn
                round
                small
                outline
                class="subTitle"
                color="light-blue"
                @click="onOrder(props.item)"
              >
                <div class="mr-1">查看订单</div>
              </v-btn>
              <v-btn
                round
                small
                outline
                class="subTitle"
                color="red lighten-2"
                @click="onStop(props.item)"
                v-if="props.item.publishStatus === 1"
              >
                <div class="mr-1">停止活动</div>
              </v-btn>
            </td>
          </template>
          <template v-slot:no-data>
            <v-alert :value="true" outline color="warning" icon="info">暂无数据</v-alert>
          </template>
        </v-data-table>

        <v-layout class="pagination-wrapper">
          <v-flex md10 d-flex justify-start align-center>
            <v-flex d-flex md2 justify-start align-center>
              <v-flex md4 class="title-color">显示</v-flex>
              <v-flex md4>
                <v-select
                  @change="onPageOptionChange"
                  :items="pageOptions"
                  v-model="pagination.limit"
                ></v-select>
              </v-flex>
              <v-flex md4 class="title-color">条/页</v-flex>
            </v-flex>
            <v-flex md2 class="title-color">共 {{ pagination.pageCount }} 条数据</v-flex>
            <v-flex md2></v-flex>
            <v-flex md4>
              <v-pagination
                @input="onPageChange"
                :length="pagination.pageCount"
                circle
                total-visible="5"
                v-model="pagination.page"
              />
            </v-flex>
            <v-flex md2></v-flex>
          </v-flex>
        </v-layout>
      </v-flex>
    </v-layout>

    <v-dialog v-model="dialog" :width="dialogWidth">
      <v-card>
        <v-card-title class="headline grey lighten-2" primary-title>{{ dialogTitle }}</v-card-title>

        <v-card-text>
          <!-- 查看主图 -->
          <v-layout justify-center align-center v-if="dialogType === 1">
            <v-flex md12>
              <img class="product-image" :src="dialogItem.productImg" alt />
            </v-flex>
          </v-layout>
          <!-- 查看用户信息 -->
          <v-layout justify-center align-center v-if="dialogType === 2">
            <v-flex md2>店铺名称: {{ dialogItem.shopName }}</v-flex>
            <v-flex md2></v-flex>
          </v-layout>

          <!-- 查看活动详情 -->
          <v-layout justify-center align-center v-if="dialogType === 3">
            <v-flex md12>
              <v-container grid-list-md>
                <v-layout wrap>
                  <!-- 选择评测平台 -->
                  <v-flex md4>
                    <v-select :items="platforms" v-model="dialogItem.platform" disabled label="平台"></v-select>
                  </v-flex>
                  <!-- 选择评测站点 -->

                  <v-flex md4>
                    <v-select :items="sites" v-model="dialogItem.siteId" disabled label="站点"></v-select>
                  </v-flex>
                  <!-- 店铺名称 -->
                  <v-flex md4>
                    <v-text-field v-model="dialogItem.shopName" disabled label="店铺名称"></v-text-field>
                  </v-flex>
                  <!-- 选择产品类别 -->
                  <v-flex md4>
                    <v-select
                      disabled
                      :items="categories"
                      v-model="dialogItem.category"
                      label="产品类目"
                    ></v-select>
                  </v-flex>
                  <!-- 产品标题 (英文) -->
                  <v-flex md4>
                    <v-text-field disabled label="产品标题(英文)" v-model="dialogItem.titleEnglish"></v-text-field>
                  </v-flex>
                  <!-- 产品标题 (中文) -->

                  <v-flex md4>
                    <v-text-field
                      disabled
                      label="产品标题(中文)"
                      v-model="dialogItem.titleChinese"
                      counter="20"
                    ></v-text-field>
                  </v-flex>

                  <v-flex md4>
                    <v-text-field disabled label="ASIN" v-model="dialogItem.productAsin"></v-text-field>
                  </v-flex>
                  <v-flex md4>
                    <v-text-field disabled label="产品价格" v-model="dialogItem.price"></v-text-field>
                  </v-flex>

                  <v-flex md4>
                    <v-text-field label="产品链接" v-model="dialogItem.interlinkage"></v-text-field>
                  </v-flex>

                  <v-flex md4>
                    <v-text-field disabled label="关键词" v-model="dialogItem.keyword"></v-text-field>
                  </v-flex>

                  <v-flex md4>
                    <v-text-field disabled label="产品位置" v-model="dialogItem.position"></v-text-field>
                  </v-flex>

                  <v-flex md4>
                    <v-text-field
                      disabled
                      label="增值费"
                      v-model="dialogItem.addedFee"
                      append-icon="attach_money"
                    ></v-text-field>
                  </v-flex>

                  <v-flex md8>
                    <v-text-field disabled label="评测数量" v-model="dialogItem.amount"></v-text-field>
                  </v-flex>

                  <v-flex md4>
                    <span>产品类别</span>
                    <span>{{ dialogItem.taskType | TaskType }}</span>
                    </v-radio-group>
                  </v-flex>

                  <v-flex md12 class="text-xs-left title-color">产品主图</v-flex>
                  <v-flex md8 class="elevation-4">
                    <div class="fill-height fill-width">
                      <img
                        class="preview-image"
                        :src="dialogItem.productImg"
                        alt
                        v-if="dialogItem.productImg !== ''"
                      />
                    </div>
                  </v-flex>

                  <!-- <v-flex md8>
                <div class="subTitle text-xs-left">{{ totalPrice }}</div>
                  </v-flex>-->
                </v-layout>
              </v-container>
            </v-flex>
          </v-layout>

          <!-- 查看关联订单 -->
          <v-layout justify-center align-center v-if="dialogType === 4">
            <v-flex md12>
              <v-data-table
                :headers="dialogHeaders"
                :loading="loading"
                :items="dialogData"
                hide-actions
              >
                <template v-slot:items="props">
                  <td class="text-xs-center">{{ props.item.orderId }}</td>
                  <td class="text-xs-center">{{ props.item.taskNumber }}</td>
                  <td class="text-xs-center">{{ props.item.platform | Platform }}</td>
                  <td class="text-xs-center">{{ props.item.taskType | TaskType }}</td>
                  <td class="text-xs-center">{{ props.item.orderStatus | OrderStatus }}</td>
                  <td class="text-xs-center">{{ props.item.buyerNickName }}</td>
                  <td class="text-xs-center">{{ props.item.orderNumber }}</td>
                  <td class="text-xs-center">{{ getTime(props.item.createTime) }}</td>
                </template>
                <template v-slot:no-data>
                  <v-alert :value="true" outline color="warning" icon="info">暂无数据</v-alert>
                </template>
              </v-data-table>
            </v-flex>
          </v-layout>
        </v-card-text>

        <v-divider></v-divider>

        <v-card-actions>
          <v-spacer></v-spacer>
          <v-btn color="blue darken-1" flat @click="onDialogConfirm">确认</v-btn>
          <v-btn color="grey darken-1" flat @click="dialog = false">取消</v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>

    <v-dialog v-model="modal" persistent max-width="290">
      <v-card>
        <v-card-title class="title">{{ modalTitle }}</v-card-title>
        <v-card-text class="title">{{ modalContent }}</v-card-text>
        <v-card-actions>
          <v-spacer></v-spacer>
          <v-btn color="blue darken-1" flat @click="onModalConfirm">确定</v-btn>
          <v-btn color="grey darken-1" flat @click="modal = false">取消</v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>
  </div>
</template>


<script lang="ts">
// 使用类装饰器
import { Component, Vue } from "vue-property-decorator";
import { Todo } from "@/api";
import { TaskStatusKV, PageOptions } from "@/utils/constants";
import { forEach } from "lodash";
import { KV } from "@/utils/type";
import { RequestPageVo } from "@/api/bean";
import { getTime } from "@/utils/commonUtils";
declare const $Vue: Vue;

@Component
export default class TraceTask extends Vue {
  private pageOptions: any = [];

  private queryForm: any = {
    taskNumber: "",
    shopName: ""
  };

  private getTime(date: string) {
    return getTime(date);
  }

  private headers: Array<any> = [
    { text: "ID", align: "center", sortable: false, value: "id" },
    { text: "任务编号", align: "center", sortable: false, value: "taskId" },
    { text: "平台名称", align: "center", sortable: false, value: "platform" },
    { text: "任务类型", align: "center", sortable: false, value: "type" },
    { text: "商家用户信息", align: "center", sortable: false, value: "seller" },
    { text: "我的店铺", align: "center", sortable: false, value: "myshop" },
    { text: "产品单价", align: "center", sortable: false, value: "price" },
    { text: "产品主图", align: "center", sortable: false, value: "image" },
    { text: "评测数量", align: "center", sortable: false, value: "review" },
    { text: "创建时间", align: "center", sortable: false, value: "createTime" },
    { text: "返现金额", align: "center", sortable: false, value: "bonus" },
    { text: "操作", align: "center", sortable: false, value: "action" }
  ];

  private dialogHeaders: Array<any> = [
    { text: "ID", align: "center", sortable: false, value: "id" },
    { text: "活动编号", align: "center", sortable: false, value: "taskId" },
    { text: "平台名称", align: "center", sortable: false, value: "platform" },
    { text: "任务类型", align: "center", sortable: false, value: "type" },
    { text: "订单状态", align: "center", sortable: false, value: "seller" },
    { text: "买手信息", align: "center", sortable: false, value: "myshop" },
    { text: "订单号", align: "center", sortable: false, value: "orderId" },
    { text: "创建时间", align: "center", sortable: false, value: "createTime" }
  ];

  private tableData: any = [
    {
      taskId: "123"
    }
  ];

  private loading: boolean = false;
  private imagePreview: string = "";

  private dialogWidth: number = 800;
  private dialog: boolean = false;
  private dialogTitle: string = "";
  private dialogType: number = 1;
  private dialogItem: any = {};
  private dialogData: any = [];

  private modal: boolean = false;
  private modalType: number = 1;
  private modalTitle: string = "注意!";
  private modalContent: string = "确认取消订单吗?";
  private modalItem: any = {};
  private isQuery: boolean = false;

  private pagination: any = {
    pageCount: 20,
    page: 1,
    limit: 10,
    offset: 0
  };

  protected mounted() {
    this.getActivityList();
    this.initialize();
  }

  private initialize() {
    // this.states = TaskStatusKV.slice();
    this.pageOptions = PageOptions.slice();
  }

  private onQuery(from?: string) {
    let params: any = {};
    let valid = 0;
    forEach(this.queryForm, (item, key) => {
      item ? (params[key] = item) : valid++;
    });
    if (valid === 2) {
      return $Vue.$emit("snackbar", {
        message: "请至少填写一个查询条件"
      });
    }

    if (from === undefined) {
      this.pagination.offset = 0;
      this.pagination.page = 1;
    }
    params.limit = this.pagination.limit;
    params.offset = this.pagination.offset;
    this.getActivityList(params);
    this.isQuery = true;
  }

  private onImage(item: any) {
    this.dialogTitle = "产品主图";
    this.dialog = true;
    this.dialogItem = item;
    this.dialogType = 1;
    this.dialogWidth = 800;
  }

  private onUserInfo(item: any) {
    this.dialogTitle = "商家用户信息";
    this.dialog = true;
    this.dialogItem = item;
    this.dialogWidth = 800;
    this.dialogType = 2;
  }

  // 查看详情
  private onDetail(item: any) {
    this.dialogTitle = "活动详情";
    this.dialog = true;
    this.dialogItem = item;
    this.dialogType = 3;
    this.dialogWidth = 1200;
    this.getSingleDetailsTask();
  }

  // 查看订单
  private onOrder(item: any) {
    this.dialogType = 4;
    this.dialogItem = item;
    this.dialogTitle = "任务订单";
    this.dialogWidth = 1200;
    this.getDetailsTaskContainOrder();
  }

  // 停止活动
  private onStop(item: any) {
    this.modalType = 1;
    this.modal = true;
    this.modalItem = item;
    this.modalContent = "确认停止该活动吗?";
  }

  private onPageChange(page: number) {
    this.pagination.offset = (page - 1) * this.pagination.limit;
    if (!this.isQuery) {
      this.getActivityList();
    } else {
      this.onQuery("wyvonj");
    }
  }

  private onPageOptionChange(value: any) {
    this.pagination.page = 1;
    this.pagination.offset = 0;
  }

  private onModalConfirm() {
    if (this.modalType === 1) {
      this.cancelActivity();
    }
  }

  private onDialogConfirm() {
    if (this.dialogType === 1) {
      this.dialog = false;
    }
  }

  /**
   * 获取任务列表
   */
  private async getActivityList(queryForm?: any) {
    let params: RequestPageVo = {
      offset: this.pagination.offset,
      limit: this.pagination.limit
    };
    if (queryForm) {
      params = queryForm;
    }
    const { data } = await Todo.getTaskList.r(params);
    console.log("getActivityList", data);
    if (data.result === 0) {
      let $data = data.data;
      this.tableData = $data.dataList;

      this.pagination.pageCount = $data.totalCount
        ? Math.ceil($data.totalCount / this.pagination.limit)
        : 1;
    } else {
      $Vue.$emit("snackbar", {
        message: data.message
      });
    }
  }

  /**
   * 停止活动
   */
  private async cancelActivity() {
    const params = {
      taskId: this.modalItem.taskId
    };
    const { data } = await Todo.cancelPublish.r(params);
    console.log("cancelPublish", data);
    $Vue.$emit("snackbar", {
      message: data.message
    });
    if (data.result === 0) {
    } else {
    }
  }

  /**
   * 获取活动详情
   */
  private async getSingleDetailsTask() {
    const params = {
      taskId: this.dialogItem.taskId
    };
    const { data } = await Todo.getSingleDetailsTask.r(params);
    console.log("getSingleDetailsTask", data);
    if (data.result === 0) {
      // this.dialogData = data.data;
      this.dialog = true;
    } else {
      $Vue.$emit("snackbar", {
        message: data.message
      });
    }
  }

  /**
   * 获取活动包含的订单
   */
  private async getDetailsTaskContainOrder() {
    const params = {
      taskId: this.dialogItem.taskId
    };
    const { data } = await Todo.getDetailsTaskContainOrder.r(params);
    console.log("getDetailsTaskContainOrder", data);
    if (data.result === 0) {
      // this.dialogItem = data.data;
      if (Array.isArray(data.data.orders)) {
        this.dialogData = data.data.orders;
      }
      this.dialog = true;
    } else {
      $Vue.$emit("snackbar", {
        message: data.message
      });
    }
  }
}
</script>

<style lang="less" scoped>
.tracetask-container {
  width: 100%;
  height: 100%;
}
.pagination-wrapper {
  background: white;
  border-top: 1px solid #d4d4d4;
}

.product-image {
  height: 20rem;
}

.preview-image {
  height: 8rem;
}
</style>


